import { useState, useEffect } from 'react'
import FitScreen from '@fit-screen/react'
import './index.scss'
import LargeSizeScreenTop from './components/top'
import LargeSizeScreenLeft from './components/left'
import LargeSizeScreenRight from './components/right'

const LargeSizeScreen = () => {
  useEffect(() => {}, [])

  // 添加蒙层函数
  return (
    <FitScreen width={1920} height={1080} mode="fit">
      {/* 左边蒙层 */}
      <div className="left_mask_box"></div>
      {/* 右边蒙层 */}
      <div className="right_mask_box"></div>
      {/* 上边蒙层 */}
      <div className="top_mask_box"></div>
      {/* 下边蒙层 */}
      <div className="bottom_mask_box"></div>
      {/* 中间蒙层 */}
      <div className="center_mask_box"></div>
      {/* 大屏内容主体 */}
      <div className="large_size_screen_wrap">
        <LargeSizeScreenTop></LargeSizeScreenTop>
        <LargeSizeScreenLeft></LargeSizeScreenLeft>
        <LargeSizeScreenRight></LargeSizeScreenRight>
      </div>
    </FitScreen>
  )
}

export default LargeSizeScreen
